const path = require("path");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
// npm i stylelint stylelint-config-standard stylelint-webpack-plugin -D
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const copyWebpackPlugin = require("copy-webpack-plugin");
module.exports = (env) => {
  const config = {
    //打包模式
    mode: "development",
    //打包入口
    entry: "./src/index.js",
    //打包出口
    output: {
      //路径必须为绝对路径，因此使用path进行拼接
      path: path.resolve(__dirname, "dist"),
      filename: "main.js",
    },
    //loader配置
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            // 将第一步处理后的JS中的样式挂载到style标签中
            //   "style-loader",
            // 将css打包成单独文件
            {
              loader: miniCssExtractPlugin.loader,
              options: {
                publicPath: "../",
              },
            },
            // 按照CommonJS规范将样式文件输出到JS中
            {
              loader: "css-loader",
              options: {
                url: true,
              },
            },
            "postcss-loader",
          ],
        },
        {
          test: /\.less$/i,
          use: [
            {
              loader: miniCssExtractPlugin.loader,
              options: {
                publicPath: "../",
              },
            },
            {
              loader: "css-loader",
              options: {
                url: true,
              },
            },
            "postcss-loader",
            "less-loader",
          ],
        },

        {
          test: /\.(png|jpe?g|gif)$/i,
          // use: {
          //   loader: "url-loader",
          //   options: {
          //     limit: 10 * 1024,
          //     name: "image/[name].[hash:7].[ext]",
          //     esModule: false,
          //   },
          // },

          // asset 可以在 asset/resource 和 asset/inline 之间进行选择
          // 类似url-loader，大小限制可配置
          // 如果文件小于 8kb，则使用 asset/inline 类型
          // 如果文件大于 8kb，则使用 asset/resource 类型
          type: "asset",
          parser: {
            dataUrlCondition: {
              maxSize: 9 * 1024,
            },
          },
          generator: {
            filename: "image/[name].[hash:7][ext]",
          },
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/i,
          // use: {
          //   loader: "file-loader",
          //   options: {
          //     name: "fonts/[name].[hash:7].[ext]",
          //   },
          // },
          type: "asset",
          parser: {
            dataUrlCondition: {
              maxSize: 9 * 1024,
            },
          },
          generator: {
            filename: "fonts/[name].[hash:7][ext]",
          },
        },
        // {
        //   test: /\.(html|htm)$/i,
        //   use: {0
        //     loader: "html-loader",
        //     options: {
        //       esModule: false,
        //     },
        //   },
        // },
        {
          test: /\.m?js$/i,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    useBuiltIns: "usage",
                    corejs: 3,
                    targets: {
                      chrome: "60",
                      ie: "9",
                      firefox: "60",
                      safari: "10",
                      edge: "17",
                    },
                  },
                ],
              ],
            },
          },
        },
      ],
    },
    //插件配置
    plugins: [
      new miniCssExtractPlugin({ filename: "css/[name].css" }),
      // 压缩css
      new optimizeCssAssetsWebpackPlugin(),
      new htmlWebpackPlugin({
        template: "./src/index.html", //默认为src/index.ejs
        title: "webpack 打包构建",
        filename: "index.html",
        minify: {
          collapseWhitespace: true,
          keepClosingSlash: true,
          removeComments: true,
          removeRedundantAttributes: true,
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true,
          useShortDoctype: true,
        },
      }),
      new copyWebpackPlugin({
        patterns: [
          {
            from: "src/public",
            to: "public",
          },
        ],
      }),
      new CleanWebpackPlugin(),
    ],
    //开发服务器配置
    devServer: {
      contentBase: path.resolve(__dirname, "dist"),
      // 启用gzip压缩，服务器压缩资源后发送到客户端
      compress: true,
      port: 2369,
      // webpack4配置热更新方法 hot:true
      liveReload: true, //webpack5配置热更新方法
      proxy: {
        // http://localhost:2369/api
        "/api": {
          // http://localhost:2369/api/users => https://api.github.com/api/users
          target: "https://api.github.com",
          // http://localhost:2369/api/users => https://api.github.com/users
          pathRewrite: {
            "^/api": "",
          },
          // 不能使用 localhost:2369 作为 github 的主机名
          // 因此使用changeOrigin修改主机
          changeOrigin: true,
        },
      },
    },
    target: "web", //在与devServer同级添加此属性，搭配liveReload开启热更新
  };
  // 判断打包环境
  if (env.production) {
    config.mode = "production";
  }
};
